import { FC, ReactElement, useCallback, useState } from "react";
import ImageSelect from "./ImageSelect";
import Title from "./Title";
import Price from "./Price";
import About from "./About";
import GenerateButton from "./GenerateButton";
import { IQRCode } from "../../types";

interface IProps {}

const QRCode: FC<IProps> = (): ReactElement => {
  const [data, setData] = useState<IQRCode>({});

  const changeImage = useCallback((file: File) => {
    setData((prev: IQRCode) => ({ ...prev, file }));
  }, []);

  const changeTitle = useCallback((title: string) => {
    setData((prev: IQRCode) => ({ ...prev, title }));
  }, []);

  const changePrice = useCallback((price: number) => {
    setData((prev: IQRCode) => ({ ...prev, price }));
  }, []);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <ImageSelect changeImage={changeImage} />
      <span style={{ fontSize: "0.5rem", color: "#666" }}>
        图片最大2M 标题和价钱为必填项
      </span>
      <Title title={data.title} changeTitle={changeTitle} />
      <Price price={data.price} changePrice={changePrice} />
      <About />
      <GenerateButton data={data} />
      <div style={{ height: "6rem" }} />
    </div>
  );
};

export default QRCode;
